<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="__STATIC__/plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="__CSS__/v1.css" media="all" />
		<script type="text/javascript">
			var SYS		= {'root':'__STATIC__'},
				CONFIG	= {$pageConfig};
		</script>
	</head>

	<body>

		<div id="#admin-page">

			<fieldset class="layui-elem-field layui-field-title">
				<legend>引用区块 - 默认风格</legend>
			</fieldset>

			<blockquote class="layui-elem-quote">这个貌似不用多介绍，因为你已经在太多的地方都看到</blockquote>
			


			<!--模拟tab-->
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			  <ul class="layui-tab-title" id="bin-tab">
				<li tab-name="globals">全局设置</li>
				<li tab-name="index">主页设置</li>
				<li tab-name="group">分组设置</li>
			  </ul>
			</div>


			<!--正文-->

			<form class="layui-form bin-form-list">

			{volist name="varList" id="data"}

				{switch name="data.type"}
					
				{case value="input"}
				<div class="layui-form-item">

				<fieldset class="layui-elem-field layui-field-title">
					<legend>{$data.admin_title}<small>{$data.key}</small></legend>
				</fieldset>

				<label class="layui-form-label">{$data.key}</label>

				<div class="layui-input-block">
				  <input type="text" name="id{$data.id}" required  lay-verify="required" placeholder="必填" autocomplete="off" class="layui-input" value="{$data.value}">

				  <div class="layui-form-mid layui-word-aux">{$data.admin_desc}</div>

				</div>
				</div>
				{/case}

				{case value="select"}
				<div class="layui-form-item">

				<fieldset class="layui-elem-field layui-field-title">
					<legend>{$data.admin_title}<small>{$data.key}</small></legend>
				</fieldset>

				<label class="layui-form-label">{$data.key}</label>
				<div class="layui-input-block" id="{$data.key}">
					<select name="id{$data.id}" lay-verify="required" select-data='{$data.attribute}' select-value="1"><option value=""></option></select>
				</div>
				</div>
				{/case}

				{case value="textarea"}
				<div class="layui-form-item">

				<fieldset class="layui-elem-field layui-field-title">
					<legend>{$data.admin_title}<small>{$data.key}</small></legend>
				</fieldset>

				<label class="layui-form-label">{$data.key}</label>
				<div class="layui-input-block">
				  <textarea name="id{$data.id}" placeholder="请输入内容" class="layui-textarea">{$data.value}</textarea>
				</div>
				</div>
				{/case}

				{case value="multi"}
				<div class="layui-form-item">

				<fieldset class="layui-elem-field layui-field-title">
					<legend>{$data.admin_title}<small>{$data.key}</small></legend>
				</fieldset>

				<label class="layui-form-label">{$data.key}</label>
				<div class="layui-input-block">
				<div multi-key='id{$data.id}' multi-data='{$data.attribute}' multi-value='{$data.value}'></div>
				</div>
				</div>
				{/case}

				{case value="upload"}
				<div class="layui-form-item">

				<fieldset class="layui-elem-field layui-field-title">
					<legend>{$data.admin_title}<small>{$data.key}</small></legend>
				</fieldset>

				<label class="layui-form-label">{$data.key}</label>
				<div class="layui-input-block">

				<input type="text" name="id{$data.id}" required  lay-verify="required" placeholder="????" autocomplete="off" class="layui-input" value="{$data.value}">

				</div>

				</div>
				{/case}


				{/switch}

			{/volist}




			  <div class="layui-form-item">
			    <div class="layui-input-block">
			      <button type="button" class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
			  </div>
			</form>
			 

		</div>

		
		<script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>
		<script type="text/javascript" src="__STATIC__/admin/js/admin.js"></script>

		<script>
		layui.use(['form','jquery','layer'], function(){
			var	form = layui.form(),
					$ = layui.jquery,
					layer = layui.layer,
					layerTips = parent.layer === undefined ? layui.layer : parent.layer;
			//监听提交
			
			form.on('submit(formSubmit)', function(data){
				var index = 0;
				$.ajax({
					type:"POST",
					//url : CONFIG.up_url,
					url:'/admin/website/update.html',
					data:data.field,
					async: false,
					dataType : "json",
					beforeSend:function(){
						index = (layerTips.load(0, {time: 10*1000,shade:[0.8,'#393D49']}));
						console.log(index);
					},
					success:function(data){
						layerTips.close(index);
						var status = data.status;
						if(status == 1){
							layerTips.msg('信息修改成功');
							//刷新本界面
							//location.reload();
						}else{
							layerTips.msg('信息修改失败');
						}
						
					},
					error:function(){
						layerTips.close(index);
						console.log('没有回传数据');
					}
				});

			return false;
			});


			$("#bin-tab > li[tab-name]").each(function(k){

				tab = $(this);
				keys = $(this).attr('tab-name');
				if (keys == CONFIG.tab_name) {
					tab.addClass('layui-this');
				}

				tab.click(function(){
					key = $(this).attr('tab-name');
					location.href = '?type='+key;
				});
			});

			//一些绘制
			$("select[select-data]").each(function(i){
				sel = $(this);
				data = JSON.parse(sel.attr('select-data'));

				for (var i = 0; i < data.length; i++) {

					if (data[i]['k'] == sel.attr('select-value')) {
						sel.append('<option value="'+data[i]['k']+'" selected>'+data[i]['v']+'</option>');
					} else {
						sel.append('<option value="'+data[i]['k']+'">'+data[i]['v']+'</option>');
					}
					
				}
				//绘制后重新渲染
				
			});

			$("div[multi-data]").each(function(k){

				sel = $(this);
				data = JSON.parse(sel.attr('multi-data'));
				value = JSON.parse(sel.attr('multi-value'));
				key = sel.attr('multi-key');

				for (var i = 0; i < data.length; i++) {

					if (value.indexOf(data[i]['k']) >-1) {
						sel.append('<input type="checkbox" name="'+key+'['+data[i]['k']+']" title="'+data[i]['v']+'" checked>');
					} else {
						sel.append('<input type="checkbox" name="'+key+'['+data[i]['k']+']" title="'+data[i]['v']+'">');
					}
					
				}
				
			});

			form.render();
	

			$('input[name=id11]').click(function(){

				BIN.color_dom = this;

				layer.open({
				  type: 2,
				  title:'颜色选择器测试',
				  area: ['700px', '530px'],
				  fixed: false, //不固定
				  maxmin: true,
				  content: 'editForm.html',
				});
			});





		});


		</script>

	</body>

</html>

<!-- 
			  <div class="layui-form-item">

				<fieldset class="layui-elem-field layui-field-title">
					<legend>网站标题<small>index_desc</small></legend>
				</fieldset>

			    <label class="layui-form-label">index_desc</label>

			    <div class="layui-input-block">
			      <input type="text" name="index_desc" required  lay-verify="required" placeholder="必填" autocomplete="off" class="layui-input">

			      <div class="layui-form-mid layui-word-aux">这里是放首页公司简介的地方</div>

			    </div>
			  </div>


			  <div class="layui-form-item">

			  	<fieldset class="layui-elem-field layui-field-title">
					<legend>多选开关测试<small>muti_test</small></legend>
				</fieldset>

			    <label class="layui-form-label">muti_test</label>
			    <div class="layui-input-block">
			      <select name="muti_test" lay-verify="required">
			        <option value=""></option>
			        <option value="0">北京</option>
			        <option value="1">上海</option>
			        <option value="2">广州</option>
			        <option value="3">深圳</option>
			        <option value="4">杭州</option>
			      </select>
			    </div>
			  </div>


			  <div class="layui-form-item">

			  	<fieldset class="layui-elem-field layui-field-title">
					<legend>复选测试<small>muti_test</small></legend>
				</fieldset>

			    <label class="layui-form-label">muti_test</label>
			    <div class="layui-input-block">
			      <input type="checkbox" name="muti_test[write]" title="写作">
			      <input type="checkbox" name="muti_test[read]" title="阅读" checked>
			      <input type="checkbox" name="muti_test[dai]" title="发呆">
			    </div>
			  </div>

			  <div class="layui-form-item">

			  	<fieldset class="layui-elem-field layui-field-title">
					<legend>开关测试<small>switch_test</small></legend>
				</fieldset>

			    <label class="layui-form-label">Switch</label>
			    <div class="layui-input-block">
			      <input type="checkbox" name="switch_test" lay-skin="switch" checked>
			    </div>
			  </div>

			  <div class="layui-form-item">

			  	<fieldset class="layui-elem-field layui-field-title">
					<legend>单选框测试<small>choose_test</small></legend>
				</fieldset>

			    <label class="layui-form-label">单选框</label>
			    <div class="layui-input-block">
			      <input type="radio" name="choose_test" value="男" title="男">
			      <input type="radio" name="choose_test" value="女" title="女" checked>
			    </div>
			  </div>

			  <div class="layui-form-item layui-form-text">

			  	<fieldset class="layui-elem-field layui-field-title">
					<legend>简单文本域<small>text_test</small></legend>
				</fieldset>

			    <label class="layui-form-label">文本域</label>
			    <div class="layui-input-block">
			      <textarea name="text_test" placeholder="请输入内容" class="layui-textarea"></textarea>
			    </div>
			  </div>


			  <div class="layui-form-item">

			  	<fieldset class="layui-elem-field layui-field-title">
					<legend>颜色选择[待开发]<small>choose_color</small></legend>
				</fieldset>

				<label class="layui-form-label">choose_color</label>
				<div class="layui-input-block">

				<input type="text" name="color" required  lay-verify="required" placeholder="假装有颜色选择器" autocomplete="off" class="layui-input">



				</div>

			  </div>


			  <div class="layui-form-item">

			  	<fieldset class="layui-elem-field layui-field-title">
					<legend>图片上传<small>image</small></legend>
				</fieldset>

				<label class="layui-form-label">image</label>
				<div class="layui-input-block">

				<input type="text" name="color" required  lay-verify="required" placeholder="????" autocomplete="off" class="layui-input">





				</div>

			  </div>




			  <div class="layui-form-item layui-form-text">

			  	<fieldset class="layui-elem-field layui-field-title">
					<legend>复杂文本域[待开发]<small>text_test</small></legend>
				</fieldset>

			    <label class="layui-form-label">textarea</label>
			    <div class="layui-input-block">
			      <textarea name="text_test" placeholder="请输入内容" class="layui-textarea"></textarea>
			    </div>
			  </div> -->